<template>
 <div class="state">
   订单详情---展示hhhhhhhhhh
   <!-- 选项卡结构 -->
   <el-tabs type="border-card" v-model="activeTab">
     <el-tab-pane label="全部" name="全部">
       <el-form :model="list">
         <el-form-item label="订单搜索" style="width: 200px">
           <el-input v-model="search" placeholder="请输入订单编号" type="text">
           </el-input>
         </el-form-item>
         <el-form-item label="产品全称" style="width: 200px">
           <el-input v-model="list.pet" placeholder="请输入产品全称" />
         </el-form-item>
         <el-form-item label="订单时间">
         <el-date-picker
     v-model="value1"
     type="daterange"
     range-separator="至"
     start-placeholder="Start date"
     end-placeholder="End date"
     value-format="YYYY-MM-DD"
   />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="editUserVisible = true" style="width: 100px;">
             查询
           </el-button>
         </el-form-item>
         <el-form-item class="btn">
           <el-button :icon="Download" class="100px" />
         </el-form-item>
       </el-form>
     </el-tab-pane>
     <!-- 申请退款 -->
     <el-tab-pane label="申请退款" name="申请退款">
       <el-form :model="list" style="width: 100%" >
         <el-form-item label="订单搜索" style="width: 200px">
           <el-input v-model="list.id" placeholder="请输入订单编号" type="text">
           </el-input>
         </el-form-item>
         <el-form-item label="产品全称" style="width: 200px">
           <el-input v-model="list.pet" placeholder="请输入产品全称" />
         </el-form-item>
         <el-form-item label="订单时间">
           <el-date-picker
     v-model="value1"
     type="daterange"
     range-separator="至"
     start-placeholder="Start date"
     end-placeholder="End date"
     value-format="YYYY-MM-DD"
   />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="editUserVisible = true" style="width: 100px;">
             查询
           </el-button>
         </el-form-item>
         <el-form-item class="btn">
           <el-button :icon="Download" class="100px" />
         </el-form-item>
       </el-form>
     </el-tab-pane>
     <!-- 商家拒绝 -->
     <el-tab-pane label="商家拒绝" name="商家拒绝">
       <el-form :model="list" style="width: 100%">
         <el-form-item label="订单搜索" style="width: 200px">
           <el-input v-model="list.id" placeholder="请输入订单编号" type="text">
           </el-input>
         </el-form-item>
         <el-form-item label="产品全称" style="width: 200px">
           <el-input v-model="list.pet" placeholder="请输入产品全称" />
         </el-form-item>
         <el-form-item label="订单时间">
           <el-date-picker
     v-model="value1"
     type="daterange"
     range-separator="至"
     start-placeholder="Start date"
     end-placeholder="End date"
     value-format="YYYY-MM-DD"
   />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="editUserVisible = true" style="width: 100px;">
             查询
           </el-button>
         </el-form-item>
         <el-form-item class="btn">
           <el-button :icon="Download" class="100px" />
         </el-form-item>
       </el-form>
     </el-tab-pane>
     <!-- 商家待退货 -->
     <el-tab-pane label="商家待退货" name="商家待退货">
       <el-form :model="list" style="width: 100%">
         <el-form-item label="订单搜索" style="width: 200px">
           <el-input v-model="list.id" placeholder="请输入订单编号" type="text">
           </el-input>
         </el-form-item>
         <el-form-item label="产品全称" style="width: 200px">
           <el-input v-model="list.pet" placeholder="请输入产品全称" />
         </el-form-item>
         <el-form-item label="订单时间">
           <el-date-picker
     v-model="value1"
     type="daterange"
     range-separator="至"
     start-placeholder="Start date"
     end-placeholder="End date"
     value-format="YYYY-MM-DD"
   />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="editUserVisible = true" style="width: 100px;">
             查询
           </el-button>
         </el-form-item>
         <el-form-item class="btn">
           <el-button :icon="Download" class="100px" />
         </el-form-item>
       </el-form>
     </el-tab-pane>
     <!-- 商家待收货 -->
     <el-tab-pane label="商家待收货" name="商家待收货">
       <el-form :model="list" style="width: 100%">
         <el-form-item label="订单搜索" style="width: 200px">
           <el-input v-model="list.id" placeholder="请输入订单编号" type="text">
           </el-input>
         </el-form-item>
         <el-form-item label="产品全称" style="width: 200px">
           <el-input v-model="list.pet" placeholder="请输入产品全称" />
         </el-form-item>
         <el-form-item label="订单时间">
           <el-date-picker
     v-model="value1"
     type="daterange"
     range-separator="至"
     start-placeholder="Start date"
     end-placeholder="End date"
     value-format="YYYY-MM-DD"
   />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="editUserVisible = true" style="width: 100px;">
             查询
           </el-button>
         </el-form-item>
         <el-form-item class="btn">
           <el-button :icon="Download" class="100px" />
         </el-form-item>
       </el-form>
     </el-tab-pane>
     <!-- 商家拒收货 -->
     <el-tab-pane label="商家拒收货" name="商家拒收货">
       <el-form :model="list" style="width: 100%">
         <el-form-item label="订单搜索" style="width: 200px">
           <el-input v-model="list.id" placeholder="请输入订单编号" type="text">
           </el-input>
         </el-form-item>
         <el-form-item label="产品全称" style="width: 200px">
           <el-input v-model="list.pet" placeholder="请输入产品全称" />
         </el-form-item>
         <el-form-item label="订单时间">
           <el-date-picker
     v-model="value1"
     type="daterange"
     range-separator="至"
     start-placeholder="Start date"
     end-placeholder="End date"
     value-format="YYYY-MM-DD"
   />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="editUserVisible = true" style="width: 100px;">
             查询
           </el-button>
         </el-form-item>
         <el-form-item class="btn">
           <el-button :icon="Download" class="100px" />
         </el-form-item>
       </el-form>
     </el-tab-pane>
     <!-- 等待退款 -->
     <el-tab-pane label="等待退款" name="等待退款">
       <el-form :model="list" style="width: 100%">
         <el-form-item label="订单搜索" style="width: 200px">
           <el-input v-model="list.id" placeholder="请输入订单编号" type="text">
           </el-input>
         </el-form-item>
         <el-form-item label="产品全称" style="width: 200px">
           <el-input v-model="list.pet" placeholder="请输入产品全称" />
         </el-form-item>
         <el-form-item label="订单时间">
           <el-date-picker
     v-model="value1"
     type="daterange"
     range-separator="至"
     start-placeholder="Start date"
     end-placeholder="End date"
     value-format="YYYY-MM-DD"
   />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="editUserVisible = true" style="width: 100px;">
             查询
           </el-button>
         </el-form-item>
         <el-form-item class="btn">
           <el-button :icon="Download" class="100px" />
         </el-form-item>
       </el-form>
     </el-tab-pane>
     <!-- 退款成功 -->
     <el-tab-pane label="退款成功" name="退款成功">
       <el-form :model="list" style="width: 100%">
         <el-form-item label="订单搜索" style="width: 200px">
           <el-input v-model="list.id" placeholder="请输入订单编号" type="text">
           </el-input>
         </el-form-item>
         <el-form-item label="产品全称" style="width: 200px">
           <el-input v-model="list.pet" placeholder="请输入产品全称" />
         </el-form-item>
         <el-form-item label="订单时间">
           <el-date-picker
     v-model="value1"
     type="daterange"
     range-separator="至"
     start-placeholder="Start date"
     end-placeholder="End date"
     value-format="YYYY-MM-DD"
   />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="editUserVisible = true" style="width: 100px;">
             查询
           </el-button>
         </el-form-item>
         <el-form-item class="btn">
           <el-button :icon="Download" class="100px" />
         </el-form-item>
       </el-form>
     </el-tab-pane>
   </el-tabs>

   <!-- table -->
   <el-table :data="filterTableData" style="width: 100%;">
     <el-table-column type="index" label="序号" width="80" />
     <el-table-column label="ID" prop="id" />
     <el-table-column label="售后单号" prop="sales" />
     <el-table-column label="订单信息" prop="order">
     </el-table-column>
     <el-table-column label="退款人" prop="user" />
     <el-table-column label="退款商品" prop="shopping" />
     <el-table-column label="退款方式" prop="methods" />
     <el-table-column label="支付状态" prop="zstatus" />
     <el-table-column label="订单状态" prop="dstatus" >
     </el-table-column>
     <el-table-column fixed="right" label="操作" width="200">
       <template #default="scope">
         <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除订单</el-button>
       </template>
     </el-table-column>
   </el-table>
   <!-- 删除确认框 -->
   <el-dialog v-model="dialogVisible" title="提示" width="30%">
     <span>确认删除</span>
     <template #footer>
       <span class="dialog-footer">
         <el-button @click="dialogVisible = false">取消</el-button>
         <el-button type="primary" @click="handrevess">
           确定
         </el-button>
       </span>
     </template>
   </el-dialog>
 </div>
</template>
<script lang= "ts" setup>
import { reactive, ref, computed } from 'vue'
import { Download } from '@element-plus/icons-vue'
//定义表格搜索栏
const editUserVisible = ref()
const dialogVisible = ref(false) // 删除
// 查询
const search = ref('')

interface tableData {
 id: string
 sales: string
 order: string
 user: string
 shopping: string
 methods: string
 zstatus: string
 dstatus: string
}
const tableData = ref([
 {
   id: '156456465',
   // order: {
   //   img: '图片',
   //   ahr: '张三',
   //   mc: '沙发',
   //   ddbh: 'vsas544554',
   //   address: '四川',
   // },
   order: '订单信息',
   user: '用户信息',
   shopping: '沙发',
   mount: '1件',
   zstatus: '已支付',
   dstatus: '申请退款',
 },
 {
   id: '4323737377',
   order: '订单信息',
   user: '用户信息',
   shopping: '电视',
   mount: '2件',
   zstatus: '已支付',
   dstatus: '商家待退货',
 },
 {
   id: '337637373',
   order: '订单信息',
   user: '用户信息',
   shopping: '衣柜',
   mount: '3件',
   zstatus: '已支付',
   dstatus: '等待退款',
 },
 {
   id: '537687373',
   order: '订单信息',
   user: '用户信息',
   shopping: '沙发',
   mount: '2件',
   zstatus: '已支付',
   dstatus: '等待退款',
 },
])
const value1 = ref('')
const list = reactive({
 id: '',
 pet: '',
 price: '',
})

// 定义选项卡激活的索引值
const activeTab = ref('全部');
// 查询
// const filterTableData = computed(() =>
//   tableData.value.filter(
//     (data) =>
//       !search.value ||
//       data.id.toLowerCase().includes(search.value.toLowerCase())
//   ))
// 使用计算属性根据选项卡激活的索引值过滤订单数据
let filterTableData: any = computed(() => {
  console.log(activeTab.value);
  if (activeTab.value === "全部") {
    console.log(value1.value)
    return tableData.value.filter((it:any)=>{
      // let v3 = new Date(it.orderCreateTime.slice(0,10)).getTime()
      
      return it.id.includes(search.value)&&it.shopping.includes(list.pet)
    })
  } else {
    return tableData.value.filter(
      (item: any) => item.status === activeTab.value && item.id.includes(search.value) && item.shopping.includes(list.pet)
    );
  }
});
// 删除
const delateId = ref('1234')
const handleDelete = (row: any) => {
 console.log('删除');
 delateId.value = row.id;
 dialogVisible.value = true;
}
// 删除逻辑
const handrevess = () => {
 tableData.value = tableData.value.filter((item: any) => item.id !== delateId.value)
 console.log(tableData.value);


 dialogVisible.value = false;

}
</script>

<style lang= "less" scoped>
.el-form {
 display: flex;
 justify-content: space-around;
}
</style>
